<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>boll</title>
		<style>
			p {
				padding-left: 60px;
			}

			#foo {
				border-radius: 50px;
				width: 50px;
				height: 50px;
				background: #c00;
				position: absolute;
				top: 0;
				left: 0;

				transition: all 1s;
			}
		</style>
	</head>
	<body>
		<p>随便点击某处来移动球</p>
		<div id="foo"></div>
		<script>
			var f = document.getElementById('foo');
			document.addEventListener('click', function(ev) {
				f.style.left = (ev.clientX - 25) + 'px';
				f.style.top = (ev.clientY - 25) + 'px';
			}, false);
		</script>
	</body>
</html>
